<template>
  <!-- 多级弹窗 -->
  <Teleport to="body" :disabled="!appendToBody">
    <div v-bind="$attrs" class="maskLayer-overlay"
      :style="{ background: curZIndex === zIndex ? background : '', zIndex: curZIndex }">
      <div class="maskLayer-content"
        :style="{ marginTop: props.center ? 0 : props.top, alignItems: props.center ? 'center' : 'stretch' }">
        <slot></slot>
      </div>
    </div>
  </Teleport>
</template>

<script lang='ts' setup>
import { reactive, toRaw, ref, onMounted, onUnmounted } from 'vue';
import { zIndex, subZIndex, plusZIndex } from './hooks';



const props = defineProps({
  center: {
    type: Boolean,
    default: false
  },
  top: {
    type: String,
    default: '30vh'
  },
  background: {
    type: String,
    default: 'rgba(0, 0, 0, 0.7)'
  },
  appendToBody: {
    type: Boolean,
    default: false
  }
})

let curZIndex = 0;
//  组件创建，层级加1
onMounted(() => {
  console.log('创建');
  plusZIndex();
  //  记录响应式的值
  curZIndex = toRaw(zIndex.value);
})

//  组件销毁时触发
onUnmounted(() => {
  console.log('销毁');
  subZIndex();
}) 
</script>

<style lang='scss' scoped>
.maskLayer-overlay {
  position: absolute;
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .maskLayer-content {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
